<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="checked" />
        <span>残酷月光 - 费启鸣</span>
        <!-- <a href="javascript:;" class="collect">收藏</a> -->
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
      <li>
        <input type="checkbox" />
        <span>兄弟 - 艾热</span>
        <a href="javascript:;" class="collect">收藏</a>
        <!-- <a href="javascript:;" class="cancelCollect">取消收藏</a> -->
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
    </footer>
  </section>
  <script>
    {



      let data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: true
        }, {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false
        }, {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: false,
          collect: true
        }, {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false
        }, {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: true,
          collect: false //是否收藏 true 收藏 false 没有收藏
        }
      ];

      function renderDom(data) {
        let container = document.querySelector("#list");
        container.innerHTML = "";
        // 根据数据生成dom
        data.forEach((item) => {
          let li = document.createElement("li");
          li.innerHTML = `<input type="checkbox" class="check" ${item.checked ? 'checked' : ''} />
        <span>${item.title}</span>
        ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
        <a href="javascript:;" class="remove">删除</a>`;
          container.appendChild(li);
        })
        addEvent();
      }
      renderDom(data);

      function addEvent() {
        let lis = document.querySelectorAll("#list li");
        lis.forEach((li, key) => {
          li.addEventListener("click", e => {
            // console.log(e.target.className);
            // 处理数据
            switch (e.target.className) {
              case 'check':
                // console.log("check",e.target.checked);
                data[key].checked = e.target.checked;
                isCheckAll();
                break;
              case 'cancelCollect':
                console.log("cancelCollect");
                data[key].collect = false;
                break;
              case 'collect':
                data[key].collect = true;
                break;
              case 'remove':
                data.splice(key, 1);
                break;
              default:
                break;
            }
            // console.log(data);
            renderDom(data);
          })
        })
      }

function isCheckAll(){
  document.querySelector("#checkAll").checked =  data.every(item=>item.checked);
}

// 点击全选或者全不选
document.querySelector("#checkAll").onclick = function(){
  data.forEach(item=>{
     item.checked = this.checked;
  })
  renderDom(data);
}


    }
  </script>
</body>

</html>